<template>
  <div class="app_containers pos">
    <moitorHeader></moitorHeader>
    <div class="bgc_a" @click="jump_homepage">
    </div>
    <div class="m_main">
      <div class="box">
        <div class="lelf_module">
          <div class="magin_top">
            <div class="magin_personnel">
              <div class="box_ac">
                <div class="magin_police">
                  <div class="magin_police_a"></div>
                  <div class="magin_police_text">警员</div>
                </div>
                <div class="magin_police_digit">200</div>
              </div>
              <div class="box_bc">
                <div class="magin_police">
                  <div class="magin_police_a"></div>
                  <div class="magin_police_text">犯人</div>
                </div>
                <div class="magin_police_digit">200</div>
              </div>
            </div>
            <div id="intelligence_statistics" class="magin_visual">
              <div class="magin_d">暂无数据</div>
            </div>
          </div>
          <div class="alarm_Statistics_a">
            <div class="alarm_device_box">
              <div class="device_text">设备统计</div>
              <!-- <div class="device_ck">查看></div> -->
            </div>
            <div class="device_outside">
              <div class="device_box">
                <div class="device_box_a">
                  <div class="device_elliptic">
                    <div class="device_camera"></div>
                  </div>
                  <div class="device_text_a">98/100</div>
                </div>
                <p class="device_felx">监控设备</p>
              </div>
              <div class="device_box">
                <div class="device_box_a">
                  <div class="device_elliptic">
                    <div class="device_prohibit"> </div>
                  </div>
                  <div class="device_text_a">98/100</div>
                </div>
                <p class="device_felx">门禁设备</p>
              </div>
              <div class="device_box">
                <div class="device_box_a">
                  <div class="device_elliptic">
                    <div class="device_broadcast"></div>
                  </div>
                  <div class="device_text_a">98/100</div>
                </div>
                <p class="device_felx">广播设备</p>
              </div>
              <div class="device_box">
                <div class="device_box_a">
                  <div class="device_elliptic">
                    <div class="device_voltage"></div>
                  </div>
                  <div class="device_text_a">98/100</div>
                </div>
                <p class="device_felx">高压电网</p>
              </div>
            </div>
          </div>
          <div class="total_number">
            <div class="total_box">
              <div class="device_texts">今日告警总数：22</div>
              <!-- <div class="device_ck">查看></div> -->
            </div>
            <div class="total_alarm">
              <div class="total_box_h">
                <div class="total_positive">
                  <div class="total_s">1</div>
                </div>
                <div class="total_texta"> 正告警 </div>
              </div>
              <div class="total_box_hs">
                <div class="total_handle">
                  <div class="total_s">1</div>
                </div>
                <div class="total_texts"> 待处理 </div>
              </div>
              <div class="total_box_hp">
                <div class="total_normal">
                  <div class="total_s">1</div>
                </div>
                <div class="total_textd"> 已处理 </div>
              </div>
            </div>
          </div>
        </div>
        <div class="module_box">
          <div class="module_top">
            <ul class="jump">
              <li class="jump_a">
                <div class="jump_camera"></div>
                <div class="jump_text"> 视频监控</div>
              </li>
              <li class="jump_a">
                <div class="jump_infrared"></div>
                <div class="jump_text"> 红外对射</div>
              </li>
              <li class="jump_a">
                <div class="jump_door"></div>
                <div class="jump_text"> 门禁管理</div>
              </li>
              <li class="jump_a">
                <div class="jump_analysis"></div>
                <div class="jump_text"> 智能分析</div>
              </li>
              <li class="jump_a">
                <div class="jump_patrol"></div>
                <div class="jump_text"> 巡逻更新</div>
              </li>
              <li class="jump_a">
                <div class="jump_broadcast"></div>
                <div class="jump_text"> 广播系统</div>
              </li>
              <li class="jump_a">
                <div class="jump_language"></div>
                <div class="jump_text"> 语音对讲</div>
              </li>
              <li class="jump_a">
                <div class="jump_law"></div>
                <div class="jump_text"> 执法终端</div>
              </li>
              <li class="jump_a">
                <div class="jump_electricity"></div>
                <div class="jump_text"> 高压电网</div>
              </li>
              
            </ul>
          </div>
          <div class="button_module">
            <div class="map_top">
              <div class="map_txet">
                <!-- <a-select
                v-model:value="selectMapId"
                @change="changeMap"
                class="map_text_x"
              >
                <a-select-option
                  v-for="item in maplist"
                  :key="item.id"
                  :value="item.id"
                  >{{ item.name }}</a-select-option
                >
              </a-select> -->
                <rwSelect
                  v-model:value="selectWardId"
                  type="ward"
                  className="map_text_x"
                  :xhrParams="{ data: 'data' }"
                  @input="changeWard"
                  @loadList="loadList"
                ></rwSelect>
              </div>
            </div>
            <div class="map_Component">
              <div id="map" class="map"></div>
              <div class="map_screen" id="fullscreenButton" @click="amplify">
                <Icon class="icons" icon="ant-design:fullscreen-outlined"></Icon>
                <span class="map_Full_Screen">全屏地图模式</span>
              </div>
              <div class="module_refresh">
                <Icon class="icons" icon="ant-design:reload-outlined" @click="refresh"></Icon>
                <Icon class="icons" icon="ant-design:minus-circle-outlined" @click="add"></Icon>
                <Icon class="icons" icon="ant-design:plus-circle-outlined" @click="cs"></Icon>
              </div>
              <div class="toogle_map" v-if="maplist.length">
                <a-popover placement="topLeft" overlayClassName="toogle_pop">
                  <template #content>
                    <div
                      class="map_item"
                      :class="[selectMapId.id == item.id ? 'map_active' : '']"
                      v-for="item in maplist"
                      @click="changeMap(item.id)"
                      :key="item.id"
                    >
                      <p class="select_title">{{ item.name }}</p>
                      <img class="select_img" :src="getImg(item.id)" />
                    </div>
                  </template>
                  <template #title>
                    <span style="font-weight: 600">选择地图</span>
                  </template>
                  <a-button>{{ selectMapId.name }} / 切换地图</a-button>
                </a-popover>
              </div>
            </div>
            <div class="map_bottom"></div>
          </div>
        </div>
        <moitorSlider :list="alarmstatistics"></moitorSlider>
      </div>
    </div>
  </div>
</template>
<script setup>
import moitorHeader from '/@/components/monitor/header.vue';
import moitorSlider from '/@/components/monitor/slider.vue';
import rwSelect from '/@/components/RW/orgSelect.vue';
import { ref, onMounted, onUnmounted, nextTick, reactive, unref } from 'vue';
import { router } from '/@/router';
import '../../../assets/iconfont/iconfont.css';
import * as api from './index.api';
import { getMap, getPeopleCounting, getWarningCount } from '../../../api/common/map';
import moment from 'moment';
import { useMap } from '/@/hooks/rw/map';
import screenfull from 'screenfull';
import * as echarts from 'echarts';
import { BasicWarnTypeEnum } from '/@/utils/type';
import utlis, { getImg } from '/@/utils/rw/utli';
import { useFullscreen } from '@vueuse/core';
// import { list } from "/@/views/alarm/real/real.api.ts";
const warCountList = [];
const mapC = ref(null);
const mapI = ref(null);
const tbcolumns = [
  {
    title: '床号',
    dataIndex: 'bedCode',
    key: 'bedCode',
  },
  {
    title: '姓名',
    dataIndex: 'binderName',
    key: 'binderName',
  },
  {
    title: '告警时间',
    dataIndex: 'createdTime',
    key: 'createdTime',
  },
];
onMounted(async () => {
  getWarCount();
  Personnel_statistics();
  await getWarHisCount();
  getDeviceStatus();
  getMaps();
  const { common, map } = useMap({
    el: 'map',
  });
  mapI.value = map;
  mapC.value = common;
  nextTick(() => {
    for (let i = 0; i < warCount.value.length; i++) {
      Personnel_statistics(warCount.value[i]);
    }
  });
});
onUnmounted(() => {
  exit();
});
const rwmapRef = ref(null);
const nowMap = ref({});
const selectMapId = ref({});
const selectWardId = ref('');
const maplist = ref([]);
const map = ref({});
const queryParams = ref({
  pageIndex: 1,
  limit: 10,
  keyWord: undefined,
  WarnType: '',
});
const statistics = ref(20);
const tabulation = ref([]);
const IntelligentDevices = ref({});
const IntelligentMattress = ref({});
const IntelligentBadge = ref({});
const IntelligentRadar = ref({});
const showfullscreenElement = ref(false);
const warCount = ref({});
const alarmstatistics = ref([]);
const statisticsList = ref([]);
function changedevice(vaild, item) {
  if (!vaild) return;
  api.gethisCountInfo(item.warnType).then((res) => {
    statisticsList.value = res.data;
    // statisticsList.value = [{ bedCode: "123" }];
  });
}
function exit() {
  mapC.value.stop();
}
function ins() {}
function jump() {
  router.push('/alarm/history');
}
function realTime() {
  router.push('/alarm/real');
}
function jump_homepage() {
  router.push('/newBraceletmonitoring');
}
function changeWard(id) {
  selectWardId.value = id;
  getMaps();
}
async function getWarCount() {
  let res = await api.getCount();
  alarmstatistics.value = res.data;
}
async function getWarHisCount() {
  let res = await api.gethisCount();
  warCount.value = res.data;
}
function loadList(list) {
  selectWardId.value = list[0].id;
}
//实时告警
// function getWarningList() {
//   list(queryParams.value).then((res) => {
//     tabulation.value = res.data.entities;
//   });
// }
//人员统计
function Personnel_statistics(a) {
  let dom = document.getElementById(a);
  if (!dom) return;
  let intelligence_statistics = echarts.init(dom);
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999',
        },
      },
    },
    xAxis: [
      {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisPointer: {
          type: 'shadow',
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
        name: 'Precipitation',
        min: 0,
        max: 1000,
        interval: 0,
      },
    ],
    series: [
      {
        name: 'Evaporation',
        type: 'bar',
        tooltip: {
          valueFormatter: function (value) {
            return value + ' ml';
          },
        },
        data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
      },
      {
        name: 'Precipitation',
        type: 'bar',
        tooltip: {
          valueFormatter: function (value) {
            return value + ' ml';
          },
        },
        data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
      },
    ],
  };
  intelligence_statistics.setOption(option);
  window.addEventListener('resize', () => {
    intelligence_statistics.resize();
  });
}
//扇形可视数据图，雷达
function visualizations(a, percent) {
  console.log(a, percent);
  let intelligence_Bracelet = echarts.init(document.getElementById(a));
  const option = {};
  intelligence_Bracelet.setOption(option);
}
//扇形可视数据图，手环，床垫
function visualization(a, percent, total) {
  let dom = document.getElementById(a);
  if (!dom) return;
  let intelligence_Bracelet = echarts.init(dom);
  const option = {
    tooltip: {
      show: false,
      formatter: '{a} <br/>{b} : {c}%',
    },
    title: [
      {
        y: '60%',
        x: 'center',
        textStyle: {
          fontSize: 36,
          fontFamily: 'yueyuan',
          color: '#b3defc',
        },
      },
    ],
    series: [
      {
        name: '最外部进度条',
        type: 'gauge',
        radius: '100%',
        center: ['center', 'center'], // 仪表位置
        splitNumber: 100,
        axisLine: {
          lineStyle: {
            color: [
              [100, new echarts.graphic.LinearGradient(0, 1, 0, 0)],
              [1, '#f00'],
            ],
            width: 10,
          },
        },
        axisLabel: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        itemStyle: {
          show: false,
        },
        detail: {
          show: false,
        },
        pointer: {
          show: false,
        },
        animationDuration: 4000,
      },
      {
        name: '渐变数据环整个',
        type: 'pie',
        radius: ['80%', '95%'],
        avoidLabelOverlap: false,
        startAngle: 210,
        color: [
          {
            type: 'linear',
            x: 1,
            y: 0,
            x2: 0,
            y2: 0,
            colorStops: [
              {
                offset: 0,
                color: '#5EB409', // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#5EB409', // 100% 处的颜色
              },
            ],
          },
          'transparent',
        ],
        hoverAnimation: false, //是否开启 hover 在扇区上的放大动画效果。
        legendHoverLink: false, //是否启用图例 hover 时的联动高亮。
        label: {
          normal: {
            show: false,
            position: 'center',
          },
          emphasis: {
            show: false,
          },
        },
        labelLine: {
          normal: {
            show: false,
          },
        },
        data: [
          {
            value: total,
            name: '1',
            itemStyle: {
              borderWidth: 3,
              borderColor: '#4C7FDB',
            },
          },
          {
            value: total / 2,
            name: '2',
            itemStyle: {
              borderWidth: 0,
              borderColor: 'transparent',
            },
          },
        ],
      },
      {
        name: '内部渐变线 ',
        type: 'pie',
        radius: ['49%', '55%'],
        avoidLabelOverlap: false, //是否启用防止标签重叠策略
        startAngle: -30,
        hoverAnimation: false,
        legendHoverLink: false,
        label: {
          normal: {
            show: false,
          },
          emphasis: {
            show: false,
          },
        },
        itemStyle: {
          normal: {
            color: ['#4497EA'],
          },
        },
        labelLine: {
          normal: {
            show: false,
          },
        },
        data: [
          {
            value: total / 2,
            name: '1',
            itemStyle: {
              color: ['transparent'],
            },
          },
          {
            value: total,
            name: '2',
          },
        ],
      },
      {
        name: '环形百分比',
        type: 'pie',
        radius: ['80%', '95%'],
        avoidLabelOverlap: false,
        startAngle: -38,
        color: ['#091424', 'transparent', 'transparent'],
        hoverAnimation: false,
        legendHoverLink: false,
        clockwise: false, //饼图的扇区是否是顺时针排布。
        itemStyle: {
          show: false,
          normal: {
            borderColor: 'transparent',
            borderWidth: '20',
          },
          emphasis: {
            borderColor: 'transparent',
            borderWidth: '20',
          },
        },
        z: 10,
        label: {
          normal: {
            show: false,
            position: 'center',
          },
        },
        labelLine: {
          normal: {
            show: false,
          },
        },
        data: [
          {
            value: ((total - percent) * 150) / 240,
            label: {
              normal: {
                formatter: utlis.Percentage(percent, total, true),
                position: 'center',
                show: true,
                textStyle: {
                  fontSize: '18',
                  fontWeight: 'normal',
                  color: '#b3defc',
                },
              },
            },
            name: '',
          },
          {
            value: 0,
            name: '',
          },
          {
            value: total - ((total - percent) * 260) / 360,
            name: '',
          },
        ],
      },
    ],
  };
  intelligence_Bracelet.setOption(option);
  window.addEventListener('resize', () => {
    intelligence_Bracelet.resize();
  });
}
//地图-----------------------------------------------------------------------------------------------------
//放大
function cs() {
  document.querySelector('.leaflet-control-zoom-in').click();
}
//地图缩放
function add() {
  document.querySelector('.leaflet-control-zoom-out').click();
}
//刷新地图
function refresh() {
  getMaps();
}
//全屏
function amplify() {
  const mapContainer = document.getElementById('map');

  const clonedMapContainer = mapContainer.cloneNode(true);
  if (document.fullscreenElement) {
    // 退出全屏
    document.exitFullscreen().then(() => {
      mapContainer.replaceWith(clonedMapContainer);
      showfullscreenElement.value = false;
    });
  } else {
    // 进入全屏
    mapContainer.requestFullscreen();
    showfullscreenElement.value = true;
  }
}

function change(e) {
  if (!e.deviceCode) return msgError('该标签未绑定');
  monitorTag = e.binderId;
  map.setMonitorTag(e.deviceCode);
  let TagCode = e.deviceCode;
  map.Mqtt.setRealSensingShareDevice(TagCode);
  GetMembersPosition(e.deviceCode).then((res) => {
    if (nowMap.value.code != res.data) {
      const r = maplist.value.find((item) => item.code == res.data);
      if (r) {
        loadMap(r.id);
      }
    }
  });
}
function setInfoDiagramCallback() {
  let diagram = infoDlg.newInstance('m_map').diagram;
  return diagram;
}

function loadMap(mapId) {
  const r = maplist.value.find((item) => item.id == mapId);
  if (!r) {
    msgError('未找到地图');
    return;
  }
  nowMap.value = r;
  r.imgUrl = window.config.base_url + r.imageUrl;
  map.loadMap(r).then(() => {
    getHeatmapLayer();
  });
}
function getHeatmapLayer() {
  let func = () => {
    getPeopleCountTimer = setTimeout(() => {
      getPeopleCounting().then((res) => {
        peopleCountList = res.data;
        map.setHeatmapLayerData({ heatList: peopleCountList });
        func();
      });
    }, 1000);
  };
  func();
}
function changeMap(map) {
  let r = maplist.value.find((item) => {
    return item.id == map;
  });
  selectMapId.value = r;
  mapC.value.loadMap(r);
  mapC.value.initPosition({ mapId: map }, 2000);
}
function getMaps() {
  getMap({ pageSize: 9999, pageIndex: 1, Id: selectWardId.value, nodeType: 'Ward' }).then((res) => {
    maplist.value = res.data.entities;
    if (maplist.value.length > 0) {
      selectMapId.value = maplist.value[0];
      mapC.value.loadMap(maplist.value[0]);
      mapC.value.initPosition({ mapId: maplist.value[0].id }, 2000);
    }
  });
}
function getDeviceStatus() {
  api.getolLine().then((res) => {
    let data = res.data;
    data.forEach((item) => {
      visualization(`intelligence_${item.deviceCategory}`, item.onlineCount, item.totalCount);
    });
  });
}
</script>
<style lang="scss">
.echartImg{
  width: 90%;
  height: 45%;
  margin-top: 6%;
  margin-left: 5%;
}
.jeecg-default-layout-main {
  margin-left: 0;
}
.jeecg-setting-drawer-fearure {
  display: none;
}
.ant-select-dropdown {
  z-index: 9999;
}

.ant-popover {
  z-index: 9999 !important;
}
.hide {
  width: 500px !important;
  overflow: auto;
  height: 30vh;
  background-color: #0f285a;
  border: 1px solid #1b60cc;

  .ant-table {
    background: transparent !important;
  }
  .ant-table .ant-table-thead th {
    border-bottom: 1px solid #618ee2;
    background-color: transparent;
    color: #fff;
  }
  .ant-table .ant-table-tbody .empty-text {
    color: #fff;
  }
  .ant-table .ant-table-tbody tr {
    background-color: transparent;
    color: #fff;
  }
  .ant-table .ant-table-tbody tr:hover > td {
    background-color: #618ee2;
    border-bottom: 1px solid #618ee2;
  }
  .ant-table .ant-table-tbody td {
    border-bottom: 1px solid #4e88df;
  }

  .ant-popover-inner,
  .ant-table-tbody {
    background-color: transparent !important;
    background: transparent !important;
  }
  .ant-empty-description {
    color: #fff;
  }
}

.pos {
  .ant-select {
    width: 80% !important;
  }
  .ant-select-selection-placeholder {
    color: #01c3e8 !important;
  }
  .iconfont {
    width: 100%;
    height: 70%;
    background-image: -webkit-linear-gradient(bottom, #0e9afa, #35eaed, #3fffea);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .ant-popover {
    z-index: 9999 !important;
  }
  .mattressHidden {
    width: 500px !important;
    height: 30vh !important;
    overflow: auto !important;
    position: absolute !important;
    top: 754px !important;
    left: 330px !important;
    background-color: #0f285a;
    border: 1px solid #1b60cc;
    margin-top: -12%;
    margin-left: 50px !important;
    .ant-table {
      background-color: transparent;
    }
    .ant-table .ant-table-thead th {
      border-bottom: 1px solid #618ee2;
      background-color: transparent;
      color: #fff;
    }
    .ant-table .ant-table-tbody .empty-text {
      color: #fff;
    }
    .ant-table .ant-table-tbody tr {
      background-color: transparent;
      color: #fff;
    }
    .ant-table .ant-table-tbody tr:hover > td {
      background-color: #618ee2;
      border-bottom: 1px solid #618ee2;
    }
    .ant-table .ant-table-tbody td {
      border-bottom: 1px solid #4e88df;
    }
  }
  .ant-select-selector {
    border: none !important;
    background-color: transparent !important;
    font-size: 18px;
    color: #01c3e8;
    width: 85% !important;
    margin: 0 auto;
  }
  .ant-select-arrow,
  .ant-select-selection-item {
    color: #01c3e8 !important;
    font-size: 14px;
  }
  .ant-select-dropdown {
    background: transparent;
    border: solid 1px #1b60cc !important;
    color: #fff;
    z-index: 99999;
  }
  .ant-select-item {
    color: #fff !important ;
  }
  .ant-empty-description {
    color: #fff;
  }
  .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
    background: transparent !important;
    color: #1b60cc !important;
  }
  .ant-select-item:hover {
    background: transparent;
  }
  .button_right_a {
    font-size: 18px;
    text-align: center;
    color: #01c3e8;
    margin-top: 20px;

    .el-select__caret {
      font-size: 18px !important;
      color: #01c3e8 !important;
    }
  }
  .list_text {
    font-size: 18px;
    line-height: 40px;
    text-align: center;
    color: #01c3e8;
  }
  .leaflet-top {
    display: none;
  }
  .map_text_x {
    font-size: 18px;
    text-align: center;
    color: #01c3e8;
    z-index: 9999;
    .el-input__inner {
      border: none;
      background: transparent;
      font-size: 18px;
      color: #01c3e8;
      margin-left: 30%;
    }
    .el-select-dropdown {
      position: absolute;
      top: 50px !important;
      left: 0px !important;
      background-color: #12264b;
      border: solid 1px #1b60cc !important;
      .el-select-dropdown__item {
        background: transparent;
        background-color: #12264b;
        color: #ddd7d7;
      }
      .el-select-dropdown__item:hover {
        background-color: #1b60cc;
      }
    }
  }
}

.toogle_pop {
  .ant-popover-content {
    max-height: 700px;
    overflow: auto;
  }
}
</style>
<style lang="scss" scoped>
.map_active {
  .select_title {
    background: #eee;
    padding: 10px;
  }
}
.map_item {
  cursor: pointer;
  &:hover {
    .select_title {
      background: #eee;
      padding: 10px;
    }
  }
  .select_title {
    transition: all 0.3s ease;
  }
  .select_img {
    width: 220px;
    height: 150px;
  }
}
.app_containers {
  zoom: 0.9;
  // min-width: 1700px;
  display: block;
  width: 100%;
  height: 100%;
  background-image: url('../../../assets/ruijin/images/Underlay.png');
  background-size: 100% 100%;
  color: #fff;
  font-size: 12px;
  font-family: PingFangSC-Medium, PingFang SC, Microsoft YaHei;
  padding-bottom: 20px;
  .el-icon-back {
    font-size: 18px;
    text-align: center;
    font-family: TRENDS;
    margin-left: 20px;
  }
  .bgc_a {
    width: 230px;
    height: 30px;
  }

  .m_main {
    padding: 0 !important;
    overflow: hidden;
    height: calc(100% - 100px);
    .box {
      width: 100%;
      height: 100%;
      display: flex;
      .lelf_module {
        width: 35%;
        height: 100%;
        margin-right: 20px;
        z-index: 9999;
        .magin_top {
          width: 100%;
          height: 30%;
          background-image: url('../../../assets/ruijin/images/border.png');
          background-repeat: no-repeat;
          background-size: 100% 100%;
          .magin_personnel {
            width: 100%;
            height: 35%;
            display: flex;
            .box_ac {
              width: 50%;
              height: 100%;
              margin-top: 7%;
              margin-left: 10%;
              display: flex;
              .magin_police {
                width: 40%;
                height: 60%;
                .magin_police_a {
                  width: 100%;
                  height: 100%;
                  background-image: url('../../../assets/ruijin/images/Officer.png');
                  background-repeat: no-repeat;
                  background-size: 100% 100%;
                }
                .magin_police_text {
                  text-align: center;
                  font-size: 15px;
                }
              }
              .magin_police_digit {
                font-size: 25px;
                margin-top: 5%;
                color: #1296db;
              }
            }
            .box_bc {
              width: 50%;
              height: 100%;
              margin-top: 7%;
              display: flex;
              .magin_police {
                width: 40%;
                height: 60%;
                .magin_police_a {
                  width: 100%;
                  height: 100%;
                  background-image: url('../../../assets/ruijin/images/prisoner.png');
                  background-repeat: no-repeat;
                  background-size: 100% 100%;
                }
                .magin_police_text {
                  text-align: center;
                  font-size: 15px;
                }
              }
              .magin_police_digit {
                font-size: 25px;
                margin-top: 5%;
                color: #ff4cad;
              }
            }
          }
          .magin_visual {
            width: 100%;
            height: 65%;
            .magin_d{
              font-size: 18px;
            text-align: center;
            margin-top: 15%;
            }
          }
        }
        .braceletStatus {
          width: 100%;
          height: 67%;
          margin: 10px;
          display: flex;
          background-image: url('../../../assets/ruijin/images/border.png');
          background-repeat: no-repeat;
          background-size: 100% 100%;
          .bracelet_monitoring {
            margin-top: 15%;
            margin-left: 10%;
            width: 130px;
            height: 50px;
            .bracelet_picture {
              width: 38px;
              height: 52px;
              background-image: url('../../../assets/ruijin/images/bracelet.png');
              background-repeat: no-repeat;
              background-size: 100% 100%;
            }
            // .bracelet_text {
            //   margin-left: 20px;
            //   font-size: 18px;
            //   line-height: 50px;
            // }
          }
          .electricity_cc {
            width: 100%;
            height: 100%;
            display: flex;
            .electricity_aa {
              width: 50%;
              margin-top: 20%;
              .electricity_a {
                width: 30px;
                height: 42px;
                background-image: url('../../../assets/ruijin/images/battery.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;
                margin-left: 20px;
              }
              .text_l {
                width: 100%;
                font-size: 18px;
                margin-top: 20px;
              }
            }
            .electricity_bb {
              width: 50%;
              margin-top: 20%;
              .electricity_b {
                width: 30px;
                height: 40px;
                background-image: url('../../../assets/ruijin/images/disconnect.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;
                margin-left: 20px;
              }
              .text_c {
                width: 100%;
                font-size: 18px;
                margin-top: 20px;
              }
            }
          }
        }
        .bedStatus {
          width: 100%;
          height: 67%;
          margin: 10px;
          display: flex;
          background-image: url('../../../assets/ruijin/images/border.png');
          background-repeat: no-repeat;
          background-size: 100% 100%;
          .bed_electricity {
            margin-top: 15%;
            margin-left: 10%;
            width: 300px;
            height: 50px;
            .bed_picture {
              width: 58px;
              height: 36px;
              background-image: url('../../../assets/ruijin/images/mattress.png');
              background-repeat: no-repeat;
              background-size: 100% 100%;
            }
            // .bed_text {
            //   margin-left: 20px;
            //   font-size: 18px;
            //   line-height: 50px;
            // }
          }
          .network_aa {
            margin-top: 10%;
            width: 100%;
            height: 100%;
            .network_b {
              width: 30px;
              height: 40px;
              margin-left: 40%;
              background-image: url('../../../assets/ruijin/images/disconnect.png');
              background-repeat: no-repeat;
              background-size: 100% 100%;
            }
            .text_c {
              width: 50%;
              font-size: 18px;
              margin-left: 30%;
              margin-top: 20px;
            }
          }
        }
        .millimeterWaveRadarStatus {
          width: 100%;
          height: 70%;
          margin: 10px;
          display: flex;
          background-image: url('../../../assets/ruijin/images/border.png');
          background-repeat: no-repeat;
          background-size: 100% 100%;
          .millimeterWaveRadar_picture_a {
            margin-top: 15%;
            margin-left: 10%;
            width: 300px;
            height: 50px;
            .millimeterWaveRadar_picture_b {
              width: 58px;
              height: 59px;
              background-image: url('../../../assets/ruijin/images/millimeterwaveradar.png');
              background-repeat: no-repeat;
              background-size: 100% 100%;
            }
          }
          .millimeterWaveRadar_picture_c {
            margin-top: 10%;
            margin-left: 28%;
            width: 100%;
            height: 100%;
            .millimeterWaveRadar_picture_d {
              width: 30px;
              height: 40px;
              margin-left: 20px;
              background-image: url('../../../assets/ruijin/images/disconnect.png');
              background-repeat: no-repeat;
              background-size: 100% 100%;
            }
            .millimeterWaveRadar_picture_text {
              width: 100%;
              font-size: 18px;
              margin-top: 20px;
            }
          }
        }
        .pie_shaped_visual {
          width: 100px;
          height: 100px;
        }
        .alarm_Statistics_a {
          width: 100%;
          height: 30%;
          margin-top: 10%;
          margin-bottom: 10%;
          background-image: url('../../../assets/ruijin/images/border2.png');
          background-repeat: no-repeat;
          background-size: 100% 100%;
          .alarm_device_box {
            width: 100%;
            height: 20%;
            display: flex;
            .device_text {
              width: 50%;
              font-size: 17px;
              margin-top: 5%;
              margin-left: 10%;
            }
          }
          .device_outside {
            width: 100%;
            height: 80%;
            flex-wrap: wrap;
            display: flex;
            .device_box {
              width: 50%;
              height: 30%;
              .device_box_a {
                width: 100%;
                height: 100%;
                display: flex;
                .device_elliptic {
                  width: 30%;
                  height: 85%;
                  margin-left: 10%;
                  border: 0px solid #000000;
                  box-shadow: 0px 10px 20px 0px rgba(54, 192, 152, 0.5);
                  border-radius: 50%;
                  .device_camera {
                    width: 50%;
                    height: 50%;
                    margin-top: 20%;
                    margin-left: 30%;
                    background-image: url('../../../assets/ruijin/images/Camera.png');
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                  }
                  .device_prohibit {
                    width: 50%;
                    height: 50%;
                    margin-top: 20%;
                    margin-left: 25%;
                    background-image: url('../../../assets/ruijin/images/prohibit.png');
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                  }
                  .device_broadcast {
                    width: 50%;
                    height: 50%;
                    margin-top: 20%;
                    margin-left: 25%;
                    background-image: url('../../../assets/ruijin/images/broadcast.png');
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                  }
                  .device_voltage {
                    width: 50%;
                    height: 50%;
                    margin-top: 20%;
                    margin-left: 25%;
                    background-image: url('../../../assets/ruijin/images/voltage.png');
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                  }
                }
                .device_text_a {
                  width: 50%;
                  height: 20%;
                  font-size: 17px;
                  margin-top: 10%;
                  text-align: center;
                }
              }
              .device_felx {
                width: 55%;
                font-size: 13px;
                text-align: center;
              }
            }
          }
        }
        .total_number {
          width: 100%;
          height: 30%;
          background-image: url('../../../assets/ruijin/images/border3.png');
          background-repeat: no-repeat;
          background-size: 100% 100%;
          .total_box {
            width: 100%;
            height: 20%;
            display: flex;
            .device_texts {
              width: 50%;
              font-size: 17px;
              margin-top: 5%;
              margin-left: 10%;
            }
          }
          .total_alarm {
            width: 100%;
            height: 70%;
            display: flex;
            .total_box_h {
              width: 100%;
              height: 85%;
              .total_positive {
                width: 70%;
                height: 70%;
                border: 0px solid #070707;
                box-shadow: inset 10px -11px 22px 0px rgba(190, 60, 149, 1);
                border-radius: 15%;
                margin: 20px;
                .total_s {
                  text-align: center;
                  line-height: 100px;
                  font-size: 33px;
                }
              }
              .total_texta {
                font-size: 17px;
                text-align: center;
                color: rgb(190, 60, 149);
              }
            }
            .total_box_hs {
              width: 100%;
              height: 85%;
              .total_handle {
                width: 70%;
                height: 70%;
                border: 0px solid #a7471d;
                box-shadow: inset 10px -11px 22px 0px rgba(255, 90, 0, 1);
                border-radius: 15%;
                margin: 20px;
                .total_s {
                  text-align: center;
                  line-height: 100px;
                  font-size: 33px;
                }
              }
              .total_texts {
                font-size: 17px;
                text-align: center;
                color: rgb(255, 90, 0);
              }
            }

            .total_box_hp {
              width: 100%;
              height: 85%;
              .total_normal {
                width: 70%;
                height: 70%;
                border: 0px solid #070707;
                box-shadow: inset 10px -11px 22px 0px rgba(48, 203, 0, 1);
                border-radius: 15%;
                margin: 20px;
                .total_s {
                  text-align: center;
                  line-height: 100px;
                  font-size: 33px;
                }
              }
              .total_textd {
                font-size: 17px;
                text-align: center;
                color: rgb(48, 203, 0);
              }
            }
          }
        }
      }
      .module_box {
        width: 100%;
        height: 100%;
        position: relative;
        .module_top {
          width: 100%;
          height: 14%;
          margin-bottom: 1%;
          .jump {
            width: 100%;
            height: 100%;
            display: flex;
            .jump_a {
              width: 10%;
              height: 80%;
              margin-top: 10px;
              border: 0px solid #000000;
              background: linear-gradient(0deg, #19fff400 0%, #aeffae00 100%);
              box-shadow: inset 0px 0px 15px -5px rgb(14, 13, 13);
              border-radius: 10px;
              padding-top: 24px;
              margin: 10px;
              .jump_camera {
                width: 30%;
                height: 40%;
                background-image: url('../../../assets/ruijin/images/border5.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;
                margin-left: 35%;
              }
              .jump_infrared{
                width: 30%;
                height: 40%;
                background-image: url('../../../assets/ruijin/images/border6.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;
                margin-left: 35%;
              }
              .jump_door{
                width: 30%;
                height: 40%;
                background-image: url('../../../assets/ruijin/images/border7.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;
                margin-left: 35%;
              }
              .jump_analysis{
                width: 30%;
                height: 40%;
                background-image: url('../../../assets/ruijin/images/border8.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;
                margin-left: 35%;
              }
              .jump_patrol{
                width: 30%;
                height: 40%;
                background-image: url('../../../assets/ruijin/images/border9.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;
                margin-left: 35%;
              }
              .jump_broadcast{
                width: 30%;
                height: 40%;
                background-image: url('../../../assets/ruijin/images/border10.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;
                margin-left: 35%;
              }
              .jump_language{
                width: 30%;
                height: 40%;
                background-image: url('../../../assets/ruijin/images/border11.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;
                margin-left: 35%;
              }
              .jump_law{
                width: 30%;
                height: 40%;
                background-image: url('../../../assets/ruijin/images/border12.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;
                margin-left: 35%;
              }
              .jump_electricity{
                width: 30%;
                height: 40%;
                background-image: url('../../../assets/ruijin/images/border13.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;
                margin-left: 35%;
              }
              .jump_text {
                font-size: 18px;
                background: linear-gradient(to bottom, #3fffea 0%, #35eaed 50%, #0e9afa 100%);
                background-clip: text;
                -webkit-background-clip: text;
                text-align: center;
                color: transparent;
              }
            }
          }
        }
        .button_module {
          width: 100%;
          height: 85%;
          position: relative;
          .map_top {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 90%;
            height: 10px;
            z-index: 1000;
            background-image: url('../../../assets/ruijin/images/decorationtop.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            margin-left: 5%;
            .map_txet {
              width: 50%;
              height: 60px;
              margin-left: 25%;
              background-image: url('../../../assets/ruijin/images/transparent.png');
              background-repeat: no-repeat;
              background-size: 100% 100%;
              font-size: 18px;
              text-align: center;
              line-height: 60px;
              color: #01c3e8;
            }
          }

          .map_Component {
            width: 100%;
            height: 100%;
            background-image: url('../../../assets/ruijin/images/floor.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            #map {
              background-image: url(/src/assets/ruijin/images/Underlay.png);
              background-size: cover;
              width: 100%;
              height: 100%;
              padding-top: 50px;
            }
            .map_screen {
              position: absolute;
              top: 3%;
              margin-left: 5%;
              z-index: 999;
              .icons {
                font-size: 30px !important;
              }
              .map_Full_Screen {
                font-size: 18px;
                margin-left: 10px;
              }
            }
            .toogle_map {
              position: absolute;
              right: 20px;
              bottom: 20px;
              z-index: 9999;
            }
            .module_refresh {
              position: absolute;
              top: 3%;
              right: 5%;
              z-index: 9999;
              .icons {
                font-size: 30px !important;
                margin-left: 20px;
              }
            }
            .map {
              width: 100%;
              height: 90%;
            }
          }
          .map_bottom {
            position: relative;
            top: 96%;
            bottom: 0;
            width: 80%;
            height: 10px;
            margin-left: 121px;
            background-image: url('../../../assets/ruijin/images/decorationbottom.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
          }
          .btn_module {
            width: 100%;
            height: 32%;
            display: flex;

            .button_right {
              width: 50%;
              height: 100%;
              margin-left: 10px;
              background-image: url('../../../assets/ruijin/images/border.png');
              background-repeat: no-repeat;
              background-size: 100% 100%;
              .btn_content {
                width: 100%;
                margin-top: 30px;
                margin-left: 40px;
                font-size: 18px;
                color: #01c3e8;
              }
              .equipment {
                width: 100%;
                height: 75%;
                margin-left: 10px;
              }
            }
            .button_left {
              width: 50%;
              height: 100%;
              margin-left: 10px;
              background-image: url('../../../assets/ruijin/images/border.png');
              background-repeat: no-repeat;
              background-size: 100% 100%;
              .btn_content {
                width: 100%;
                margin-top: 30px;
                margin-left: 40px;
                font-size: 18px;
                color: #01c3e8;
              }
              .equipment {
                position: relative;
                top: 0;
                left: 4%;
                width: 100%;
                height: 70%;
              }
            }
          }
        }
      }
      .right_module {
        width: 35%;
        height: 100%;
        margin-right: 10px;
        margin-left: 15px;
        margin-top: 10px;
        z-index: 9999;
        .right_top {
          width: 100%;
          height: 25%;
          display: flex;
          background-image: url('../../../assets/ruijin/images/border.png');
          background-repeat: no-repeat;
          background-size: 100% 100%;
          .right_top_a {
            width: 40%;
            .nurse {
              width: 55px;
              height: 60px;
              margin-top: 50%;
              margin-left: 40%;
              background-image: url('../../../assets/ruijin/images/nurse.png');
              background-repeat: no-repeat;
              background-size: 100% 100%;
            }
          }

          .nurse_Information {
            width: 60%;
            .InformationA {
              margin-top: 25%;
              font-size: 18px;
            }
            .InformationB {
              font-size: 18px;
              margin-bottom: 20px;
              margin-top: 20%;
            }
          }
        }
        .right_button {
          width: 100%;
          height: 73%;
          margin-top: 10px;
          background-image: url('../../../assets/ruijin/images/frame.png');
          background-repeat: no-repeat;
          background-size: 100% 100%;
          .alarm_list {
            width: 100%;
            height: 40px;
            padding-top: 25px;
            text-align: center;
            .list_text {
              font-size: 18px;
              text-align: center;
              color: #01c3e8;
              z-index: 99999;
              .ant-select-dropdown {
                z-index: 999 !important;
              }
            }
          }
          .list_data {
            width: 100%;
            height: 85%;
            margin-top: 20px;
            .warning_content_ul {
              height: 100%;
              overflow: auto;
              padding: 0;
              .no_data {
                height: 100%;
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                color: #ddd;
                font-size: 18px;
              }

              .a_a {
                width: 100%;
                height: 16%;
                margin-top: 2%;
                background-color: rgba(255, 255, 255, 0.1);
                display: flex;
                align-items: center;
                .a_b {
                  display: flex;
                  font-size: 18px;
                  margin-left: 5%;
                  width: 100%;
                  .a_t {
                    width: 80%;
                    height: 100%;
                  }

                  .a_r {
                    .bracelet_picture_a {
                      width: 20px;
                      height: 26px;
                      margin: 0;
                      margin-top: 10px;
                      margin-right: 20px;
                      display: inline-block;
                      background-image: url('../../../assets/ruijin/images/minibracelet.png');
                      background-repeat: no-repeat;
                      background-size: 100% 100%;
                    }
                  }
                }
                .a_c {
                  font-size: 15px;
                  display: flex;
                  .a_v {
                    margin-left: 10px;
                  }
                }
              }
            }
            .a_k {
              font-size: 18px;
              text-align: center;
            }
          }
        }
      }
    }
  }
  .map_amplify {
    position: absolute;
    width: 100%;
    height: 100vh;
    background-color: #12264b;
    z-index: 99999;
    .map_amplify_x {
      font-size: 24px;
      margin-left: 20%;
    }
    #m_map {
      background-color: transparent;
      width: 100%;
      height: 100vh;
    }
  }
}
</style>
